{% extends "repo/repo.html" %}

{% block subcontainer %}
<div class="hooks inner bubble">
  <ul class="breadcrumb">
    <li><a href="/{{user_name}}/{{repo_name}}/settings/"><i>&larr;</i>返回设置</a></li>
  </ul>
  <div class="header">
    <h1 class="heading">服务钩子列表</h1>
    <p class="note"><a target="_blank" href="https://help.github.com/articles/post-receive-hooks">什么是服务钩子?</a></p>
    <div class="extra">
      <a href="javascript:;" id="add_url_tip" class="btn btn-mini"><i class="icon-plus-sign"></i>添加服务钩子</a>
      <div id="url_input" class="fields hide">
        <input id="url" type="text" name="url" maxlength="1024" placeholder="http(s)://example.com">
        <button id="add_url" type="submit" class="btn btn-success">添加</button>
      </div>
    </div>
  </div>

  <div class="hookurls{% if not webHookURLs %} well{%endif%}">
    {% if webHookURLs %}
      <ul class="webhook-url">
        {%for webHookURL in webHookURLs%}
          <li>
            <div class="action">
              {% if webHookURL.status == 0 %}
              <button class="disable btn btn-mini btn-warning" data-hook-id="{{webHookURL.id}}">禁用</button>
              {% else %}
              <button class="enable btn btn-mini btn-primary" data-hook-id="{{webHookURL.id}}">启用</button>
              {% endif %}
              <button class="remove btn btn-mini btn-danger" data-hook-id="{{webHookURL.id}}">删除</button>
            </div>
          <p class="url"><a href="{{webHookURL.url}}" target="_blank">{{webHookURL.url}}</a></p>
          </li>
        {%endfor%}
      </ul>
    {% else %}
      <p class="alert blank-alert"><i class="icon-bell"></i>没有服务钩子</p>
    {% endif %}
  </div>

</div>
{% endblock %}

{% block subjs %}

<script>
  $(function(){
    $('#add_url_tip').click(function(event) {
        $(this).hide();
        $('#url_input').show();
        $('#url').focus();
    });
    $('#url').blur(function(event) {setTimeout(function(event) {
        $('#url_input').hide();
        $('#add_url_tip').show();
    }, 300);});

    function reload_or_alert_error(json) {
        if(json.code == 200) {
            window.location.href = window.location.href;
            return;
        }
        alert(json.message);
    }
    $('#add_url').click(function(event) {
        var url = $('#url').val();
        var post_url = _.sprintf('/%s/%s/settings/hook/web_hook_url/add/', '{{user_name}}', '{{repo_name}}');
        $.post(post_url, {csrfmiddlewaretoken: '{{ csrf_token }}', 'url': url}, function(json){
            reload_or_alert_error(json);
        });
    });
    $('.enable').click(function(event) {
        var hook_id = $(this).data('hook-id');
        var post_url = _.sprintf('/%s/%s/settings/hook/web_hook_url/%s/enable/', '{{user_name}}', '{{repo_name}}', hook_id);
        $.post(post_url, {csrfmiddlewaretoken: '{{ csrf_token }}'}, function(json){
            reload_or_alert_error(json);
        });
    });
    $('.disable').click(function(event) {
        var hook_id = $(this).data('hook-id');
        var post_url = _.sprintf('/%s/%s/settings/hook/web_hook_url/%s/disable/', '{{user_name}}', '{{repo_name}}', hook_id);
        $.post(post_url, {csrfmiddlewaretoken: '{{ csrf_token }}'}, function(json){
            reload_or_alert_error(json);
        });
    });
    $('.remove').click(function(event) {
        var hook_id = $(this).data('hook-id');
        var post_url = _.sprintf('/%s/%s/settings/hook/web_hook_url/%s/remove/', '{{user_name}}', '{{repo_name}}', hook_id);
        $.post(post_url, {csrfmiddlewaretoken: '{{ csrf_token }}'}, function(json){
            reload_or_alert_error(json);
        });
    });
  });
</script>
{% endblock %}
